<template>
	<view class="content">
		<!-- 选项卡 -->
		<view class="top-tabs-list-box">
			<view class="tabBox">
				<scroll-view
					scroll-x="true"
					class="scroll-view-x"
				>
					<block v-for="(item, index) in typeList" :key="index">
						<view
							class="tabItem"
							:class="activeId == item.store_category_id? 'active' : ''"
							@click="onChange(index, item, 'activeId')"
						 >
							<view class="tabName">{{ item.name }}</view>
							<view class="tabTips"></view>
						</view>
					</block>
				</scroll-view>
			</view>
			<view class="tabBox" v-if="typeList[current].children.length">
				<scroll-view
					scroll-x="true"
					class="scroll-view-x"
				>
					<block v-for="(item, index) in typeList[current].children" :key="index">
						<view
							class="tabItem"
							:class="subActiveId == item.store_category_id? 'active' : ''"
							@click="onChange(index, item, 'subActiveId')"
						 >
							<view class="tabName">{{ item.name }}</view>
							<view class="tabTips"></view>
						</view>
					</block>
				</scroll-view>
			</view>
			<!-- 筛选框 -->
			<view class="pluge-lection-box">
				<pluge-lection
					@getSort="screenChange"
				></pluge-lection>
			</view>
		</view>
		<!-- 商品列表 -->
		<goods-list class="customGoodList" :getDataList="list" @goGoodsDetails="goIntegralDetails"></goods-list>
		<!-- 空状态 -->
		<empty v-if="!list.length" imgUrl="/pageIndex/static/icon23.png" imgWidth="256" imgHeight="220" top="100" bottom="100" desc="暂无商品"></empty>
	</view>
</template>

<script>
	import plugeLection from '@/components/goodsList/plugeLection.vue';
	import goodsList from '@/components/goodsList/goodsList.vue';
	import empty from '@/components/custom/emtyp.vue';
	export default {
		data() {
			return {
				cid: '', // 选中的一级分类ID
				activeId: '', // 选中的二级分类ID
				subActiveId: '', // 选中的三级分类ID
				sex: '', // 性别
				typeList: [], // 三级分类列表
				subTypeList: [], // 三级分类列表
				current: 0, // 选项卡绑定index
				page: 1, // 页码
				limit: 20, // 每页条数
				sales: 0, // 销量
				price: 0, // 价格
				list: [], // 商品列表
				isMore: true, // 是否还有更多数据
				mer_id: '', // 门店ID
			}
		},
		onLoad(option) {
			const { sex, cid, name, merId } = option
			this.sex = sex || ''
			this.cid = cid || ''
			this.mer_id = merId || ''
			uni.setNavigationBarTitle({
				title: unescape(name)
			})
			this.getType()
		},
		watch: {
			activeId: function (val) {
				console.log(val)
				const { typeList } = this
				this.current = typeList.findIndex(item => item.store_category_id == val)
			},
			// current: {
			// 	handler: function(index) {
			// 		const { typeList } = this
			// 		this.cid = typeList[index].store_category_id
			// 		this.getList(true)
			// 	},
			// }
		},
		methods: {
			// 获取所有分类
			getType: async function () {
				const { cid: pid, sex } = this
				const { code, data, message } = await this.$u.api.productCateApi({ pid, sex })
				if (code == '1') {
					console.log('分类列表', data)
					this.typeList = data
					data[0] && (this.activeId = data[0].store_category_id)
					data[0]?.children[0] && (this.subActiveId = data[0]?.children[0].store_category_id)
					this.getList()
					// this.typeList = data
					// const { cid } = this
					// cid && (this.current = data.findIndex(item => item.store_category_id == cid))
				} else {
					this.$showToast(message || '获取分类失败')
				}
			},
			// 获取分类商品列表
			getList: async function (isReset) {
				isReset && this.reset()
				uni.showLoading({ title: '加载中' })
				const {
					cid,
					activeId,
					subActiveId,
					price,
					sales,
					page,
					limit,
					list,
					sex,
					mer_id,
				} = this,
				param = {
					cid: subActiveId || activeId || cid,
					price,
					sale: sales,
					page,
					limit,
					sex,
					mer_id
				}
				console.log(activeId)
				console.log(subActiveId)
				console.log(param)
				const { code, data, message } = await this.$u.api.productLstApi(param)
				if (code == '1') {
					console.log('商品列表', data)
					this.list = [...list, ...data]
					if (page == 1 && (data.length < limit)) {
						this.isMore = false
					} else {
						this.isMore = data.length == limit
					}
				} else {
					this.$showToast(message)
				}
			},
			// 重置条件
			reset: function () {
				this.page = 1
				this.isMore = true
				this.list = []
			},
			// 选项卡切换事件
			onChange: function (index, item, name) {
				console.log(name, item, index)
				const { store_category_id } = item
				if (name == 'activeId') { // 二级
					if (store_category_id == this.activeId) {
						console.log('相同')
						this.subActiveId = ''
					} else {
						console.log('不相同')
						this.subActiveId = item.children[0]?.store_category_id
					}
					this.activeId = store_category_id == this.activeId? '' : store_category_id
				}
				if (name == 'subActiveId') { // 三级
					this.subActiveId = store_category_id == this.subActiveId? '' : store_category_id
				}
				this.getList(true)
			},
			// 分类筛选事件
			screenChange: function ({ type, sort }) {
				console.log(type, sort)
				if (type) {
					this[type] = sort
				} else {
					this.price = 0
					this.sales = 0
				}
				this.getList(true)
			},
			goIntegralDetails(id){ //跳转商品详情
				this.$gourl(`../../pageCart/goodsInfo/goodsInfo?goodsId=${id}`);
			}
		},
		components:{
			plugeLection,
			goodsList,
			empty,
		},
		onReachBottom: function () {
			console.log('触底了')
			const { isMore } = this
			if (!isMore) {
				this.$showToast('暂无更多数据了')
				return
			}
			this.page ++
			this.getList()
		},
	}
</script>

<style lang="scss" scoped>
	.top-tabs-list-box{
		padding: 20rpx 0 0 0;
	}
	.top-tabs-list-box .tabBox:nth-child(2) .scroll-view-x{
		margin: 30rpx 0 0 0;
	}
	.scroll-view-x{
		white-space: nowrap;
		padding: 0 20rpx;
		box-sizing: border-box;
		.tabItem{
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			margin: 0 58rpx 0 0;
			.tabNmae{
				font-size: 30rpx;
				color: #868686;
			}
			.tabTips{
				width: 40rpx;
				height: 4rpx;
				background: #181818;
				opacity: 0;
				margin: 24rpx 0 0 0;
			}
		}
		.tabItem.active{
			.tabNmae{
				color: #181818;
			}
			.tabTips{
				opacity: 1;
			}
		}
	}
	.customGoodList /deep/ .content{
		padding-top: 20rpx;
	}
	.content {
		width: 100%;
		font-family: Microsoft YaHei;
		.top-tabs-list-box {
			position: sticky;
			top: 0;
			z-index: 100;
			width: 100%;
			box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.06);
			background: white;
		}
		.pluge-lection-box{
			background: #fff;
		}
	}
	.content /deep/ .plate-box{
		position: initial !important;
	}
</style>
